<template>
  <view class="coupon-popup" v-if="show">
    <view class="popup-mask" @tap="close"></view>
    <view class="popup-content">
      <view class="popup-header">
        <text class="popup-title">选择优惠券</text>
        <text class="close-btn" @tap="close">×</text>
      </view>
      <scroll-view class="coupon-scroll" scroll-y>
        <view class="coupon-option no-coupon" @tap="selectCoupon(null)">
          <text class="option-text">不使用优惠券</text>
          <view class="radio-container">
            <view class="radio-btn" :class="{ selected: !selectedCoupon }">
              <text v-if="!selectedCoupon" class="check-mark">√</text>
            </view>
          </view>
        </view>
        
        <view v-if="availableCoupons.length > 0" class="coupon-list">
          <view 
            v-for="coupon in availableCoupons"
            :key="coupon.id"
            class="coupon-item"
            :class="{ selected: selectedCoupon?.id === coupon.id }"
            @tap="selectCoupon(coupon)"
          >
            <view class="coupon-item-left" :class="coupon.type === 'fixed' ? 'fixed-bg' : 'percent-bg'">
              <view v-if="coupon.type === 'fixed'" class="coupon-amount">
                <text class="symbol">¥</text>
                <text class="number">{{ coupon.discountAmount || 0 }}</text>
              </view>
              <view v-else-if="coupon.type === 'percent'" class="coupon-amount">
                <text class="number">{{ coupon.discountAmount || 0 }}</text>
                <text class="symbol">%</text>
              </view>
            </view>
            <view class="coupon-item-right">
              <view class="coupon-info">
                <text class="coupon-title">{{ coupon.name || '优惠券' }}</text>
                <text class="coupon-date">有效期至: {{ formatDate(coupon.endTime) }}</text>
              </view>
              <view class="coupon-bottom-info">
                <view class="coupon-condition" v-if="coupon.minAmount">
                  <text class="condition-text">满{{ coupon.minAmount }}元可用</text>
                </view>
                <view class="coupon-desc">
                  <text v-if="coupon.type === 'fixed'">立减{{ coupon.discountAmount || 0 }}元</text>
                  <text v-else-if="coupon.type === 'percent'">打{{ (100 - (coupon.discountAmount || 0)) / 10 }}折</text>
                </view>
              </view>
            </view>
            <view class="coupon-radio">
              <view class="radio-circle" :class="{ selected: selectedCoupon?.id === coupon.id }">
                <view v-if="selectedCoupon?.id === coupon.id" class="radio-inner"></view>
              </view>
            </view>
          </view>
        </view>
        
        <view v-else class="empty-coupon">
          <view class="empty-icon">
            <text class="empty-emoji">🎟️</text>
          </view>
          <text class="empty-text">暂无可用优惠券</text>
        </view>
      </scroll-view>
      <view class="popup-footer">
        <button class="confirm-btn" @tap="close">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { API } from '@/backend/typings';

const props = defineProps<{
  show: boolean;
  availableCoupons: API.CouponVO[];
  selectedCoupon: API.CouponVO | null;
}>();

const emit = defineEmits<{
  (e: 'update:show', value: boolean): void;
  (e: 'select', coupon: API.CouponVO | null): void;
}>();

// 关闭弹窗
const close = () => {
  emit('update:show', false);
};

// 选择优惠券
const selectCoupon = (coupon: API.CouponVO | null) => {
  emit('select', coupon);
};

// 格式化日期
const formatDate = (dateString?: string) => {
  if (!dateString) return '无限期';
  
  const date = new Date(dateString);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
</script>

<style scoped>
.coupon-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
  background: linear-gradient(to right, #fff9f6, #fff);
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.popup-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 28rpx;
  background-color: #ff8000;
  border-radius: 3rpx;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-btn:active {
  background-color: #f5f5f5;
}

.coupon-scroll {
  flex: 1;
  padding: 24rpx 28rpx;
  max-height: 60vh;
  background-color: #f8f8f8;
}

.coupon-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;  
  border-radius: 16rpx;
  background-color: #fff;
  margin-bottom: 20rpx; 
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
}

.coupon-option:active {
  transform: scale(0.98);
}

.option-text {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.radio-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-btn {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.radio-btn.selected {
  background-color: #ff8000;
  border-color: #ff8000;
}

.check-mark {
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}

.coupon-list {
  margin-top: 16rpx;
}

.coupon-item {
  display: flex;
  align-items: stretch;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  border: 1rpx solid #eee;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  padding-right: 10rpx; /* 添加右侧内边距 */
}

.coupon-item:active {
  transform: translateY(2rpx);
}

.coupon-item.selected {
  border-color: #ff8000;
  box-shadow: 0 4rpx 20rpx rgba(255, 128, 0, 0.15);
}

.coupon-item-left {
  width: 180rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;
  padding: 12rpx 0;
}

.coupon-item-left::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 16rpx;
  background-image: radial-gradient(circle at 0 50%, transparent 10rpx, white 10rpx);
  background-size: 16rpx 20rpx;
  background-repeat: repeat-y;
}

.fixed-bg {
  background: linear-gradient(135deg, #ff8000, #ff5722);
}

.percent-bg {
  background: linear-gradient(135deg, #4dabf7, #2196F3);
}

.coupon-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;
}

.symbol {
  font-size: 28rpx;
  font-weight: 500;
}

.number {
  font-size: 42rpx;
  font-weight: bold;
  margin: 0 2rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.coupon-item-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12rpx 16rpx 12rpx 24rpx; /* 进一步减小上下内边距 */
  position: relative;
}

.coupon-info {
  display: flex;
  flex-direction: column;
}

.coupon-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 6rpx; /* 减小底部间距 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coupon-date {
  font-size: 22rpx;
  color: #999;
  display: flex;
  align-items: center;
  margin-bottom: 6rpx; /* 添加底部间距 */
}

.coupon-date::before {
  content: "⏱";
  margin-right: 6rpx;
  font-size: 22rpx;
}

.coupon-radio {
  margin-right: 16rpx; /* 从28rpx减小到16rpx */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10rpx; /* 添加左侧内边距 */
}

.radio-circle {
  width: 36rpx; /* 从40rpx减小到36rpx */
  height: 36rpx; /* 从40rpx减小到36rpx */
  border-radius: 50%;
  border: 2rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.radio-circle.selected {
  border-color: #ff8000;
}

.radio-inner {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #ff8000;
}

.empty-coupon {
  padding: 100rpx 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-icon {
  width: 180rpx;
  height: 180rpx;
  background: linear-gradient(135deg, #fff2ed, #fff8f0);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 10rpx 30rpx rgba(255, 128, 0, 0.1);
}

.empty-emoji {
  font-size: 90rpx;
  line-height: 1;
}

.empty-text {
  font-size: 32rpx;
  color: #999;
  font-weight: 500;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20rpx); }
}

.popup-footer {
  padding: 24rpx 28rpx 50rpx 28rpx;
  border-top: 1rpx solid #f5f5f5;
  background-color: #fff;
}

.confirm-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(to right, #ff8000, #ff6000);
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  box-shadow: 0 8rpx 16rpx rgba(255, 128, 0, 0.2);
  transition: all 0.3s;
  border: none;
}

.confirm-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 8rpx rgba(255, 128, 0, 0.2);
}

.coupon-condition {
  margin: 6rpx 0;
  background-color: rgba(255, 128, 0, 0.08);
  border-radius: 20rpx;
  padding: 2rpx 10rpx;
  display: inline-block;
  margin-right: 10rpx; /* 添加右侧间距，与描述文本分开 */
}

.condition-text {
  font-size: 22rpx;
  color: #ff8000;
}

.coupon-desc {
  font-size: 22rpx;
  color: #ff5722;
  font-weight: 500;
  display: inline; /* 改为内联显示 */
}

/* 添加新的容器样式，用于放置条件和描述 */
.coupon-bottom-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>